var OPublish = Vue.component('OPublish', {
    data() {
        return {
            data: {},
            outTypesData: [],
            orderTypeData: [],
            orderInfo: {
                isRob: 2,
                isFabric: 1,
                name: '',           // 产品名称
                bond: '',           // 所需保证金
                styleNo: '',        // 款号
                styleName: '',      // 款式名称
                scence: '',         // 适用场合
                num: '',            // 数量
                money: '',          // 单价
                period: '',         // 截止抢单时间
                complete_time: '',  // 最晚完成时间
                material: '',       // 产品材质
                design: '',         // 产品款式
                style: '',          // 产品风格
                orderType: '',      // 产品类型
                tech: '',           // 工艺要求
                detail: '',         // 货单描述
                img: '',            // 主图
                proType: '1',       // 公司生产地点类型
                juli: '10',         // 公司生产地点的距离
                proWay: '1',        // 生产要求
                outTypeStr: '',     // 外发类型
                cate: '168',        // 订单类型
                sizelist: {         // 尺码
                    color: ['白', '红', '蓝'],
                    size: ['S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
                    data: [
                        {c: 'S', s: '白', v: ''},{c: 'S', s: '红', v: ''},{c: 'S', s: '蓝', v: ''},
                        {c: 'M', s: '白', v: ''},{c: 'M', s: '红', v: ''},{c: 'M', s: '蓝', v: ''},
                        {c: 'L', s: '白', v: ''},{c: 'L', s: '红', v: ''},{c: 'L', s: '蓝', v: ''},
                        {c: 'XL', s: '白', v: ''},{c: 'XL', s: '红', v: ''},{c: 'XL', s: '蓝', v: ''},
                        {c: 'XXL', s: '白', v: ''},{c: 'XXL', s: '红', v: ''},{c: 'XXL', s: '蓝', v: ''},
                        {c: 'XXXL', s: '白', v: ''},{c: 'XXXL', s: '红', v: ''},{c: 'XXXL', s: '蓝', v: ''}
                    ]
                },
                stuff: [            // 面辅料成分/缩率
                    {
                        key: '',    // 名称
                        val: ''   // 缩率
                    }
                ],
                deplete: [          // 面辅料单耗
                    {
                        name: '',   // 名称
                        size: '',   // 规格
                        num: '',    // 用量
                        remark: '', // 备注
                    }
                ]
            }
        }
    },

    template: `<div class="order__publish__box">
                    <div>
                        <h3 class="index__title">发布货单</h3>
                    </div>
                    <div class="table__two">
                        <div class="table__two__list">
                            <table>
                                <tbody>
                                    <tr>
                                        <th>
                                            <span>抢单类型：</span>
                                        </th>
                                        <td>
                                            <select :value="orderInfo.isRob">
                                              <option value="1">抢单</option>
                                              <option value="2">普通单</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>原料面料</span>
                                        </th>
                                        <td>
                                            <select :value="orderInfo.isFabric">
                                              <option value="0">不提供</option>
                                              <option value="1">提供</option>
                                            </select>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th>
                                            <span>所需保证金</span>
                                        </th>
                                        <td>
                                            <input type="number" v-model="orderInfo.bond" placeholder="请输入保证金"  size="10">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>款号</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.styleNo" placeholder="请输入款号" size="10">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>款式名称</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.styleName" placeholder="请输入款式名称" size="10">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>适用场合</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.scence" placeholder="请输入适用场合" size="10">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>数量</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.num" placeholder="请输入产品数量" size="10">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>单价</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.money" placeholder="请输入产品单价" size="10">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>截止抢单时间</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.period" id="validityInput" placeholder="请输入截止抢单时间">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>最晚完成时间</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.complete_time" id="deliverInput" placeholder="请输入最晚完成时间">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>产品材质</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.material" placeholder="请输入产品材质">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>产品款式</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.design" placeholder="请输入产品款式">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>产品风格</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.style" placeholder="请输入产品风格">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>产品类型</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.orderType" placeholder="请输入产品类型">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>工艺要求</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.tech" placeholder="请输入工艺要求" >
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>货单描述</span>
                                        </th>
                                        <td>
                                            <input type="text" v-model="orderInfo.detail" placeholder="请输入货单描述" >
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>主图</span>
                                        </th>
                                        <td>
                                            <img class="img" :src="orderInfo.img" />
                                            <span class="table__upload">
                                                <input type="file" placeholder="上传" @change="upLoadImg">
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>公司地点类型</span>
                                        </th>
                                        <td>
                                            <select :value="orderInfo.proType">
                                                <option value="1">本地生产</option>
                                                <option value="2">外地生产</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>外发范围</span>
                                        </th>
                                        <td>
                                            <select :value="orderInfo.juli">
                                                <option value="10">10公里</option>
                                                <option value="20">20公里</option>
                                                <option value="50">50公里</option>
                                                <option value="100">100公里</option>
                                                <option value="500">500公里</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>生产要求</span>
                                        </th>
                                        <td>
                                            <select :value="orderInfo.proWay">
                                                <option value="1">流水做</option>
                                                <option value="2">整件做</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>外发类型</span>
                                        </th>
                                        <td>
                                            <ul>
                                              <li v-for="item in outTypesData" :key="item.index">
                                                <input
                                                  class="check"
                                                  type="checkbox"
                                                  :data-id="item.id"
                                                  :checked="orderInfo.outTypeStr.indexOf(item.id) > -1"
                                                  @click="onClickCheckOutTypes">
                                                <label>{{ item.name }}</label>
                                              </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>订单类型</span>
                                        </th>
                                        <td>
                                            <select :value="orderInfo.cate">
                                              <option v-for="item in orderTypeData" :key="item.id" :value="item.id">{{item.name}}</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="table__four">
                        <div class="table__four__list">
                            <table>
                                <tbody>
                                    <tr>
                                        <th colspan="4">
                                            <h6>尺码选择</h6>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span></span>
                                        </th>
                                        <th>
                                            <span>白</span>
                                        </th>
                                        <th>
                                            <span>红</span>
                                        </th>
                                        <th>
                                            <span>蓝</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>S</span>
                                        </th>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[0].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[1].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[2].v">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>M</span>
                                        </th>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[3].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[4].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[5].v">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>L</span>
                                        </th>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[6].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[7].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[8].v">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>XL</span>
                                        </th>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[9].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[10].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[11].v">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>XXL</span>
                                        </th>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[12].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[13].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[14].v">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <span>XXXL</span>
                                        </th>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[15].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[16].v">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="数量" v-model="orderInfo.sizelist.data[17].v">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="table__two">
                        <div class="table__two__list">
                            <table>
                                <tbody>
                                    <tr>
                                        <th colspan="2">
                                            <h6>面辅料成分/缩率</h6>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>名称</th>
                                        <th>缩率</th>
                                    </tr>
                                    <tr v-for="(item, index) in orderInfo.stuff" :key="index">
                                        <td>
                                            <input type="text" placeholder="输入" v-model="item.key">
                                        </td>
                                        <td>
                                            <input type="text" placeholder="输入" v-model="item.val">
                                            <b @click="onStuffReduce(index)">—</b>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="index__table__add">
                                <span @click="onStuffAdd">+</span>
                            </div>
                        </div>
                    </div>
                    <div class="table__four">
                        <div class="table__four__list">
                            <table>
                                <tbody>
                                    <tr>
                                        <th colspan="4">
                                            <h6>面辅料单耗</h6>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>名称</th>
                                        <th>规格</th>
                                        <th>用量</th>
                                        <th>备注</th>
                                    </tr>
                                    <tr v-for="(item, index) in orderInfo.deplete" :key="index">
                                        <td>
                                            <input type="text" placeholder="输入" v-model="item.name">
                                        </td>
                                        <td>
                                            <input type="text" placeholder="输入" v-model="item.size">
                                        </td>
                                        <td>
                                            <input type="text" placeholder="输入" v-model="item.num">
                                        </td>
                                        <td>
                                            <input type="text" placeholder="输入" v-model="item.remark">
                                            <b @click="onDepleteReduce(index)">—</b>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="index__table__add">
                                <span @click="onDepleteAdd">+</span>
                            </div>
                        </div>
                    </div>

                    <div class="common__btn">
                        <div class="common__btn__box">
                            <span class="common__btn__sure" @click="onBtnSubmit">确认发布</span>
                        </div>
                    </div>
                </div>`,

    methods: {
        getOutTypeData () {
            // 获取所有外发类型
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/home/release/outtypes",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 2
                },
                success:function(res){
                    if(0 == res.code) {
                        self.outTypesData = res.data;
                    }
                }
            })
        },
        getOrderTypeData () {
            // 获取所有订单类型
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/home/release/cates",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 2
                },
                success:function(res){
                    if(0 == res.code) {
                        self.orderTypeData = res.data;
                    }
                }
            })
        },
        onClickCheckOutTypes(e) {
            // 外发类型的事件绑定
            var target = e.target;
            var _outTypeStr = [];
            if(this.orderInfo.outTypeStr != '') {
            _outTypeStr = this.orderInfo.outTypeStr.split(",");
            }
            if(target.checked) {
            _outTypeStr.push(target.dataset.id);
            }else {
            _outTypeStr = _outTypeStr.filter(item => {
                if(item != target.dataset.id) {
                return item;
                }
            })
            }
            this.orderInfo.outTypeStr = _outTypeStr.join(",");
        },
        onStuffReduce(_index) {
            // 删除面辅料成分/缩率
            this.orderInfo.stuff.splice(_index, 1);
        },
        onStuffAdd() {
            // 新增面辅料成分/缩率
            this.orderInfo.stuff.push({
                key: '',
                val: ''
            })
        },
        onDepleteReduce(_index) {
            // 删除面辅料单耗
            this.orderInfo.deplete.splice(_index, 1);
        },
        onDepleteAdd() {
            // 新增面辅料成分/缩率
            this.orderInfo.deplete.push({
                name: '',
                size: '',
                num: '',
                remark: ''
            })
        },
        upLoadImg(e) {
            // 上传法人证件
            var _target = e.target;
            var _files = _target.files[0];

            onUploadImg(_files, (res) => {
                if(res.code == 0) {
                    this.orderInfo.img = res.data.img;
                }
            })
        },
        onBtnSubmit() {
            // 提交信息
            if(this.orderInfo.bond == '') {
                    return ELEMENT.Message.warning('请完整填写所需保证金');
            }
            if(this.orderInfo.styleNo == '') {
                    return ELEMENT.Message.warning('请完整填写款号');
            }
            if(this.orderInfo.styleName == '') {
                return ELEMENT.Message.warning('请完整填写款式名称');
            }
            if(this.orderInfo.scence == '') {
                return ELEMENT.Message.warning('请完整填写适用场合');
            }
            if(this.orderInfo.num == '') {
                return ELEMENT.Message.warning('请完整填写数量');
            }
            if(this.orderInfo.money == '') {
                    return ELEMENT.Message.warning('请完整填写单价');
            }
            this.orderInfo.period = document.getElementById("validityInput").value;
            if(this.orderInfo.period == '') {
                return ELEMENT.Message.warning('请选择截止抢单时间');
            }
            this.orderInfo.complete_time = document.getElementById("deliverInput").value;
            if(this.orderInfo.complete_time == '') {
                return ELEMENT.Message.warning('请选择最晚完成时间');
            }
            if(this.orderInfo.material == '') {
                return ELEMENT.Message.warning('请完整填写产品材质');
            }
            if(this.orderInfo.design == '') {
                return ELEMENT.Message.warning('请完整填写产品款式');
            }
            if(this.orderInfo.style == '') {
                return ELEMENT.Message.warning('请完整填写产品风格');
            }
            if(this.orderInfo.orderType == '') {
                    return ELEMENT.Message.warning('请完整填写产品类型');
            }
            if(this.orderInfo.tech == '') {
                return ELEMENT.Message.warning('请完整填写工艺要求');
            }
            if(this.orderInfo.detail == '') {
                return ELEMENT.Message.warning('请完整填写货单描述');
            }
            if(this.orderInfo.img == '') {
                return ELEMENT.Message.warning('请上传主图');
            }
            if(this.orderInfo.outTypeStr == '') {
                return ELEMENT.Message.warning('请完整填写外发类型');
            }
            for(var i = 0;i < this.orderInfo.sizelist.data.length;i++) {
                if(this.orderInfo.sizelist.data[i].v == '') {
                    return ELEMENT.Message.warning('请完整填写尺码选择');
                }
            }
            for(var i = 0;i < this.orderInfo.stuff.length;i++) {
                if(this.orderInfo.stuff[i].key == '' || this.orderInfo.stuff[i].val == '') {
                    return ELEMENT.Message.warning('请完整填写面辅料成分/缩率');
                }
            }
            for(var i = 0;i < this.orderInfo.deplete.length;i++) {
                if(this.orderInfo.deplete[i].name == '' || this.orderInfo.deplete[i].size == '' || this.orderInfo.deplete[i].num == '' || this.orderInfo.deplete[i].remark == '') {
                    return ELEMENT.Message.warning('请完整填写面辅料单耗信息');
                }
            }

            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/home/release/outtypes",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    orderInfo: self.orderInfo
                },
                success:function(res){
                    if(0 == res.code) {
                        ELEMENT.Message.success('提交成功');
                        window.location.reload();
                    }
                }
            })
        }
    },

    created() {
      // 获取所有外发类型
      this.getOutTypeData();
      // 获取所有订单类型
      this.getOrderTypeData();
    },
    mounted(){
        dataFun(['validityInput', 'deliverInput'])
    }
})
